<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>主页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="static/assets/css/normalize.css">
		<link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
		<link rel="stylesheet" href="static/assets/css/themify-icons.css">
		<link rel="stylesheet" href="static/assets/css/pe-icon-7-filled.css">
		<link rel="stylesheet" href="static/assets/css/flag-icon.min.css">
		<link rel="stylesheet" href="static/assets/css/style.css">
		<link href="static/assets/weather/css/weather-icons.css" rel="stylesheet" />
		<link href="static/assets/calendar/fullcalendar.css" rel="stylesheet" />
		<link href="static/assets/css/charts/chartist.min.css" rel="stylesheet">
		<link href="static/assets/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">
	</head>
	<body style="background: none;">
		<div class="animated fadeIn">
			<!-- Widgets  -->
			<div class="row" style="margin-bottom: 15px;">
				<div class="col-md-12">
					<button class="btn btn-gray" onclick="jintian()">今天</button>
					<button class="btn btn-info" onclick="zuotian()">昨天</button>
				</div>
			</div>
			
              <div class="row">
              
                  <div class="col-lg-4 col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <div class="stat-widget-five">
                                  <div class="stat-icon dib flat-color-1">
                                      <i class="pe-7s-browser"></i>
                                  </div>
                                  <div class="stat-content">
                                      <div class="text-left dib">
                                          <div class="stat-text"><span id="sp2">555</span></div>
                                          <div class="stat-heading" id="div2">昨日新增用户</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-lg-4 col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <div class="stat-widget-five">
                                  <div class="stat-icon dib flat-color-2">
                                      <i class="pe-7s-users"></i>
                                  </div>
                                  <div class="stat-content">
                                      <div class="text-left dib">
                                          <div class="stat-text"><span id="sp1" class="count">555</span></div>
                                          <div class="stat-heading" id = "div1">昨日访问用户</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <div class="stat-widget-five">
                                  <div class="stat-icon dib flat-color-2">
                                      <i class="pe-7s-users"></i>
                                  </div>
                                  <div class="stat-content">
                                      <div class="text-left dib">
                                          <div class="stat-text"><span class="count" id="sp4">555</span></div>
                                          <div class="stat-heading" id="div4">昨日登录用户</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <div class="stat-widget-five">
                                  <div class="stat-icon dib flat-color-2">
                                      <i class="pe-7s-users"></i>
                                  </div>
                                  <div class="stat-content">
                                      <div class="text-left dib">
                                          <div class="stat-text"><span id="sp5" class="count">555</span></div>
                                          <div class="stat-heading" id="div5">昨日活跃用户</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  
                  <div class="col-lg-4 col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <div class="stat-widget-five">
                                  <div class="stat-icon dib flat-color-2">
                                      <i class="pe-7s-users"></i>
                                  </div>
                                  <div class="stat-content">
                                      <div class="text-left dib">
                                          <div class="stat-text"><span class="count">5555</span></div>
                                          <div class="stat-heading">总人数</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- /Widgets -->
              <!--  Traffic  -->
              <div class="row">
                  <div class="col-lg-12">
                      <div class="card">
                          <div class="card-body">
                          </div>
                          <div class="row">
                              <div class="col-lg-12">
                                  <div class="card-body">
                                      <div class="container" >
										<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
										<div id="main" style="height: 300px; background-color: #EFEFEF;"></div></div>
                                  </div>
                              </div>
                          </div> <!-- /.row -->
                          <div class="card-body"></div>
                      </div>
                  </div><!-- /# column -->
              </div>
              <!--  /Traffic -->
              <div class="clearfix"></div>
		</div>
	</body>
	<script src="static/assets/js/vendor/jquery-2.1.4.min.js"></script>
	<script src="static/layer/layer.js"></script>
	<script src="static/js/ajax.js"></script>
	<script src="static/js/echars/echarts.js"></script>
	<script type="text/javascript">
		$(function(){
			//得到要装载echarts的div
			let chartDom = document.getElementById("main");
			//对echarts进行初始化
			let myChart = echarts.init(chartDom);
			//准备数据
			let option = {
				title: {
					text: '登录统计'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['新增用户', '登录人数', '月活跃', '月登录']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
					  saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
					  name: '新增用户',
					  type: 'line',
					  data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
					  name: '登录人数',
					  type: 'line',
					  data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
					  name: '月活跃',
					  type: 'line',
					  data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
					  name: '月登录',
					  type: 'line',
					  data: [320, 332, 301, 334, 390, 330, 320]
					}
				]
			};
			//数据装载
			myChart.setOption(option);
		})
	</script>
</html>
